import React, { useEffect, useState } from "react";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
  DesktopOutlined,
} from "@ant-design/icons";
import { Layout, Menu, Button, theme, MenuProps } from "antd";
import { Route, Routes, useNavigate, useLocation} from "react-router-dom";
import AppUserList from "./pages/userlist";
import AppRoleManage from "./pages/rolemanage";
import AppLearnEXP from "./pages/learnexp";
import AppDetail from "./pages/userDetail";
import { useAppDispatch} from "./app/hooks";
import axios from "axios";
import {Set} from "../src/pages/rolemanage/roleSlice"
const { Header, Sider } = Layout;

type MenuItem = Required<MenuProps>["items"][number];

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[]
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}

const items: MenuItem[] = [
  getItem("学习心得", "/", <DesktopOutlined />),
  getItem("账户管理", "sub1", <UserOutlined />, [
    getItem("账户列表", "/userlist"),
    getItem("角色管理", "/rolemanage"),
  ]),
];

const App: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const dispatch = useAppDispatch();
  const [collapsed, setCollapsed] = useState(false);
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  
  function selectMenu(selectedItem: { key: React.Key }) {
    setSelectedKeys([String(selectedItem.key)])
    console.log(selectedItem);
    
    switch (String(selectedItem.key)) {
      case "/":
        navigate("/");
        break;
      case "/userlist":
        navigate("/userlist");
        break;
      case "/rolemanage":
        navigate("/rolemanage");
        break;
    }
  }
  useEffect(() => {
    axios.get("/api/role").then((response) => {
      dispatch(Set(response.data.data.result))
    });
    const currentPath = location.pathname;
    setSelectedKeys([currentPath])

  }, [location])
  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="demo-logo-vertical" />
        <div
          style={{
            color: colorBgContainer,
            padding: "3px",
            fontSize: "20px",
            textAlign: "center",
            display: collapsed ? "none" : "block",
          }}
        >
          后台管理系统
        </div>
        <Menu
          theme="dark"
          mode="inline"
          defaultOpenKeys={["sub1"]}
          defaultSelectedKeys={["/route/rolemanage"]}
          selectedKeys={selectedKeys}
          items={items}
          onSelect={selectMenu}
        />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }}>
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{
              fontSize: "16px",
              width: 64,
              height: 64,
            }}
          />
        </Header>
        <Routes>
          <Route path="/userlist" element={<AppUserList></AppUserList>}></Route>
          <Route path="/userdetail/*" element={<AppDetail></AppDetail>}></Route>
          <Route path="/" element={<AppLearnEXP></AppLearnEXP>}></Route>
          <Route
            path="/rolemanage"
            element={<AppRoleManage></AppRoleManage>}
          ></Route>
        </Routes>
      </Layout>
    </Layout>
  );
};

export default App;
